<template>
    <v-chart
        v-bind="$attrs"
        ref="chartRef"
        :option="option"
        :autoresize="props.autoResize"></v-chart>
  </template>
  
  <script setup lang="ts">
  import { ref, computed } from 'vue'
  import VChart from 'vue-echarts'
  import { use, registerMap } from 'echarts/core'
  import { CanvasRenderer } from 'echarts/renderers'
  import { PieChart, LineChart, BarChart, GaugeChart, PictorialBarChart, EffectScatterChart, ScatterChart, MapChart } from 'echarts/charts'
  import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'

  (window as any)['registerMap'] = registerMap;
  
  const props = defineProps(['options', 'autoResize'])
  const chartRef = ref()

  defineExpose({
    getChart: () => {
      console.log(chartRef.value)
      return chartRef.value
    },
    registerMap
  })

  const option = computed(() => {
    return props.options || {}
  })
  
  use([DatasetComponent, CanvasRenderer,
    PieChart, LineChart, BarChart, GaugeChart, PictorialBarChart, EffectScatterChart, ScatterChart, MapChart,
    GridComponent, TooltipComponent, LegendComponent])

  </script>
  